<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!-- 兼容浏览器 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 自适应屏幕大小 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>用户管理</title>
    <link href="${pageContext.request.contextPath}/css/zui.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/zui.datagrid.css" rel="stylesheet">
</head>
<body>
	<div class="">
		<div class="input-group">
		  <span class="input-group-addon">用户名称</span>
		  <input type="text" class="form-control" placeholder="用户名" id="searchUserName" name="searchUserName">
		</div>
	</div>
	<div id="userDataGrid" class="datagrid"></div>
	
	
	<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="${pageContext.request.contextPath}/js/jquery1.9.1.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="${pageContext.request.contextPath}/js/zui.js"></script>
    <!-- ZUI 表格组件 -->
    <script src="${pageContext.request.contextPath}/js/zui.datagrid.js"></script>
    <script type="text/javascript">
	    $('#userDataGrid').datagrid({
	        dataSource: {
	            cols:[
	                {name: 'userName', label: '用户名', width: 132},
	                {name: 'trueName', label: '姓名', width: 134},
	                {name: 'userState', label: '用户状态', width: 109},
	                {name: 'mobile', label: '手机号码', width: 109},
	                {name: 'oprDate', label: '操作时间', width: 287}
	            ],
	            array:[
	                {userName: 'test1', trueName:'测试人员1', userState: '正常', mobile: '15060678711', oprDate: '2019-09-20'},
	                {userName: 'test2', trueName:'测试人员2', userState: '已冻结', mobile: '15060678712', oprDate: '2019-09-19'},
	                {userName: 'test3', trueName:'测试人员3', userState: '正常', mobile: '15060678713', oprDate: '2019-09-18'}
	            ]
	        }
	    });
    </script>
</body>
</html>